<template>
  <t-row :gutter="[24, 24]">
    <t-col :flex="3">
      <t-card class="user-info-list" :title="t('pages.user.personalInfo.password')" :bordered="false">
        <t-form ref="submitFormRef" label-align="top" :data="submitForm" @submit="submit">
          <t-row style="width: 100%" :gutter="[16, 24]">
            <t-col :span="6">
              <t-form-item :label="t('pages.sysUser.oldpassword')" name="oldpassword">
                <t-input v-model="submitForm.oldpassword" :placeholder="t('pages.sysUser.oldpasswordPlaceholder')"></t-input>
              </t-form-item>
            </t-col>
            <t-col :span="6">
              <t-form-item :label="t('pages.sysUser.newpassword')" name="newpassword">
                <t-input v-model="submitForm.newpassword" :placeholder="t('pages.sysUser.newpasswordPlaceholder')"></t-input>
              </t-form-item>
            </t-col>
          </t-row>
          <t-button type="submit" style="float: right;margin-top: 20px;" >提交</t-button>
        </t-form>
      </t-card>
    </t-col>
  </t-row>
</template>

<script setup lang="ts">
import { t } from '@/locales';
import { useUserStore } from '@/store';
import { ref } from 'vue';
import { MessagePlugin, SubmitContext } from 'tdesign-vue-next';
import { changePassword } from '@/api/sysUser';

const userStore = useUserStore();
const submitForm = ref({
  oldpassword: '',
  newpassword: ''
});

const submit = async (ctx: SubmitContext) => {
  if (ctx.validateResult) {
    try {
      await changePassword(submitForm.value.oldpassword, submitForm.value.newpassword);
      MessagePlugin.success('密码修改成功！');
      // 清空表单
      submitForm.value.oldpassword = '';
      submitForm.value.newpassword = '';
    } catch (error) {
      console.error('密码修改失败:', error);
    }
  }
};
</script>

<style lang="less" scoped>
.t-descriptions {
  margin-top: 24px;
}
</style>